<template>
  <div class="allStyle">
    <h4>一.实验数据记录与处理</h4>
    <el-form :model="xiangShiForm" ref="xiangShiForm">
      <!-- 第一个表-1.箱式直流电桥测量电阻值 -->
      <hot-table
        :settings="xiangShiSettingsOne"
        :rowHeaders="true"
        :colHeaders="true"
      ></hot-table>
      <!-- 第二个表-2.测量并计算箱式直流电桥的灵敏度 -->
      <hot-table
        :settings="xiangShiSettingsTwo"
        :rowHeaders="true"
        :colHeaders="true"
      ></hot-table>
      <!-- 第三个表-3.箱式直流电桥测量电阻值 -->
      <hot-table
        :settings="xiangShiSettingsThree"
        :rowHeaders="true"
        style="text-align: center"
        :colHeaders="true"
      ></hot-table>
    </el-form>
    <el-form
      :model="formTable"
      :rules="rulesTable"
      ref="formTable"
      class="formTable"
    >
      <h4>二、选择题</h4>
      <!-- 选择题第一题 -->
      <div>
        1.在使用箱式直流电桥测量电阻时，为什么选取的比例臂一般应使单电桥的四个测量盘尽可能用上?
        (&nbsp;<span v-html="contentOne"></span>&nbsp;)
      </div>
      <el-form-item prop="xz1">
        <el-radio-group v-model="formTable.xz1">
          <el-radio label="A" @change="getRadioValOne"
            >A.测量盘必须全用上</el-radio
          >
          <el-radio label="B" @change="getRadioValOne"
            >B.比例臂的选取与测量盘使用个数无关</el-radio
          >
          <el-radio label="C" @change="getRadioValOne"
            >C.使用一个测量盘时，读出的测量值精度最高</el-radio
          >
          <el-radio label="D" @change="getRadioValOne"
            >D.读出的测量值有效位数多，测量精度有保证</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <!-- 选择题第二题 -->
      <div>
        2.为了提高电桥测量的灵敏度，应采取哪些措施?(&nbsp;<span
          v-html="contentTwo"
        ></span
        >&nbsp;)
      </div>
      <el-form-item prop="xz2">
        <el-radio-group v-model="formTable.xz2">
          <el-radio label="A" @change="getRadioValTwo">A.提高电源电压</el-radio>
          <el-radio label="B" @change="getRadioValTwo"
            >B.使用低灵敏度检流计</el-radio
          >
          <el-radio label="C" @change="getRadioValTwo"
            >C.比例臂可以随意选取</el-radio
          >
          <el-radio label="D" @change="getRadioValTwo"
            >D.不使用等臂电桥</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <h4>三、判断题</h4>
      <!-- 判断题第一题 -->
      <div>
        1.因为电桥箱是设计生产精良的专业实验仪器，电桥箱中的检流计不用调零。
        <!-- (&nbsp;<span v-html="contentThree"></span>&nbsp;) -->
      </div>
      <el-form-item prop="pd1">
        <el-radio-group v-model="formTable.pd1">
          <el-radio label="0" @change="getRadioValThree">正确</el-radio>
          <el-radio label="1" @change="getRadioValThree">错误</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 判断题第二题 -->
      <div>
        2.在电阻值的测量过程中，只用按下内接检流计开关这一个开关。
        <!-- (&nbsp;<span v-html="contentFour"></span>&nbsp;) -->
      </div>
      <el-form-item prop="pd2">
        <el-radio-group v-model="formTable.pd2">
          <el-radio label="0" @change="getRadioValFour">正确</el-radio>
          <el-radio label="1" @change="getRadioValFour">错误</el-radio>
        </el-radio-group>
      </el-form-item>
      <h4>线上资源</h4>
      <p class="addmargin">
        1）在线实验报告系统链接：
        <a style="text-decoration: none" href="http://180.76.111.200:3001/"
          >http://180.76.111.200:3001/</a
        >
      </p>
      <el-form-item>
        <el-button plain class="btn" type="primary" @click="storage()"
          >暂存</el-button
        >
        <el-button
          class="btn"
          type="primary"
          @click="submitForm('xiangShiForm')"
        >
          提交
        </el-button>
        <br />
      </el-form-item>
    </el-form>
    <!-- 暂存按钮的弹窗 -->
    <el-dialog title="提示" :visible.sync="DialogVisible" width="30%" center>
      <el-divider></el-divider>
      <div style="text-align: center">请 您 确 定 您 是 否 要 暂 存 ？</div>
      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="(DialogVisible = false), storageOk()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { HotTable } from "@handsontable/vue";
import { registerAllModules } from "handsontable/registry";
import "handsontable/dist/handsontable.full.css";

registerAllModules();

export default {
  components: {
    HotTable,
  },
  data() {
    return {
      // 第一个表-1.箱式直流电桥测量电阻值的配置
      xiangShiSettingsOne: {
        // 指定单元格的某些属性（数组），如下：
        // cell: [
        //     {row:1, col:1, data: 'ra1'},
        //     {row:1, col:2,}
        // ],
        manualRowResize: true, // 自定义行宽
        manualColumnResize: true, // 自定义列高
        preventOverflow: "vertical", // 防止水平溢出表
        headerTooltips: true, // header 内容过长提示
        // 数据部分
        data: [
          // 定义行，一共有3行
          {
            conent: "比例臂",
            number: "0.1",
            number1: "0.1",
            number2: "0.1",
            rx: "RX = ",
            danWei: "Ω",
          },
          {
            conent: "电阻臂R0(Ω)",
          },
          {
            conent: "待测电阻值RX(Ω)",
          },
        ],
        // 设置表格的边框颜色
        // customBorders: [
        //   {
        //     range: {
        //       from: { row: 1, col: 1 },
        //       to: { row: 3, col: 3 },
        //     },
        //     top: { width: 1, color: "#25e825" },
        //     right: { width: 1, color: "#25e825" },
        //     bottom: { width: 1, color: "#25e825" },
        //     left: { width: 1, color: "#25e825" },
        //   },
        //   {
        //     row: 0,
        //     col: 5,
        //     top: { width: 1, color: "#25e825" },
        //     right: { width: 1, color: "#25e825" },
        //     bottom: { width: 1, color: "#25e825" },
        //     left: { width: 1, color: "#25e825" },
        //   },
        // ],
        //最大列
        maxCols: 7,
        //最大行
        maxRows: 3,
        autoColumnSize: true, // 自适应列大小
        rowHeights: 30,
        // customBorders:[],//添加边框
        // 合并的列
        mergeCells: [
          { row: 0, col: 4, rowspan: 3, colspan: 1 },
          { row: 0, col: 5, rowspan: 3, colspan: 1 },
          { row: 0, col: 6, rowspan: 3, colspan: 1 },
        ],
        // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        // rowHeaders: ['比例臂','电阻臂R0(Ω)','待测电阻值RX(Ω)'],
        height: "auto",
        // 设置表里的文字水平 + 垂直居中
        className: "htCenter htMiddle",
        rowHeaders: false,
        // 设置固定单元格不可修改
        cells(row, colum) {
          const cellProperties = {};
          if (row === 0 && colum === 0) {
            // cellProperties.editor = false;
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 3) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 6) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          return cellProperties;
        },
        // 设置列
        columns: [
          // 第一列
          {
            data: "conent",
            editor: false,
            type: "text",
            width: 150,
          },
          // 第二列
          {
            data: "number",
            width: 120,
            // type: "numeric",
            // 设置显示格式
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第三列
          {
            data: "number1",
            width: 120,
            // type: "numeric",
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第四列
          {
            data: "number2",
            width: 120,
            // type: "numeric",
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第五列
          {
            data: "rx",
            width: 50,
          },
          // 第六列
          {
            data: "",
            width: 100,
            // type: "numeric",
            // numericFormat: {
            //   pattern: "0.00",
            // },
          },
          // 第七列
          {
            data: "danWei",
            width: 50,
          },
        ],
        // colHeaders: false,
        // 设置表头 + 表头合并
        nestedHeaders: [
          //第一行
          [
            {
              label: "1.箱式直流电桥测量电阻值",
              colspan: 7,
            },
          ],
          // 第二行
          [
            {
              label: "测量内容↓ " + " " + " 测量次数→",
            },
            {
              label: "1",
            },
            {
              label: "2",
            },
            {
              label: "3",
            },
            {
              label: "测量结果",
              colspan: 3,
            },
          ],
        ],
        //自动换行
        autoWrapRow: true,
        // 设置非商业用途属性
        licenseKey: "non-commercial-and-evaluation",
        // 更新设置，暂存显示
        afterUpdateSettings() {
          // console.log(this.getData());
          const xiangshira1 = window.localStorage.getItem("xiangshira1");
          // console.log(xiangshira1);
          if (xiangshira1 !== "null") {
            // this.getData()[1][1] = xiangshira1
            this.setDataAtCell(1, 1, xiangshira1);
          }
          const xiangshira2 = window.localStorage.getItem("xiangshira2");
          if (xiangshira2 !== "null") {
            this.setDataAtCell(1, 2, xiangshira2);
          }
          const xiangshira3 = window.localStorage.getItem("xiangshira3");
          if (xiangshira3 !== "null") {
            this.setDataAtCell(1, 3, xiangshira3);
          }
          const xiangshirx = window.localStorage.getItem("xiangshirx");
          if (xiangshirx !== "null") {
            this.setDataAtCell(0, 5, xiangshirx);
          }
          const xiangshirx1 = window.localStorage.getItem("xiangshirx1");
          if (xiangshirx1 !== "null") {
            this.setDataAtCell(2, 1, xiangshirx1);
          }
          const xiangshirx2 = window.localStorage.getItem("xiangshirx2");
          if (xiangshirx2 !== "null") {
            this.setDataAtCell(2, 2, xiangshirx2);
          }
          const xiangshirx3 = window.localStorage.getItem("xiangshirx3");
          if (xiangshirx3 !== "null") {
            this.setDataAtCell(2, 3, xiangshirx3);
          }
        },
        //数据改变时触发此方法
        afterChange: function (changes, source) {
          // console.log(changes);//null
          // console.log(source);
          // console.log(this.getCellEditor());//获取全部的值
          // 挨个获取需要传给后端的值
          // console.log(this.getData()[1][1]);
          const ra1 = this.getData()[1][1];
          sessionStorage.setItem("ra1", ra1);
          // console.log(this.getData()[1][2]);
          const ra2 = this.getData()[1][2];
          sessionStorage.setItem("ra2", ra2);
          // console.log(this.getData()[1][3]);
          const ra3 = this.getData()[1][3];
          sessionStorage.setItem("ra3", ra3);
          // console.log(this.getData()[2][1]);
          const rx1 = this.getData()[2][1];
          sessionStorage.setItem("rx1", rx1);
          // console.log(this.getData()[2][2]);
          const rx2 = this.getData()[2][2];
          sessionStorage.setItem("rx2", rx2);
          // console.log(this.getData()[2][3]);
          const rx3 = this.getData()[2][3];
          sessionStorage.setItem("rx3", rx3);
          // console.log(this.getData()[0][5]);
          const rx = this.getData()[0][5];
          sessionStorage.setItem("rx", rx);
        },
      },
      // 第二个表-2.测量并计算箱式直流电桥的灵敏度的配置
      xiangShiSettingsTwo: {
        rowHeights: 30,
        // 数据部分
        data: [
          // 定义行，一共有3行
          {
            conent: "电阻臂R0(Ω)",
            rx: "S = ",
          },
          {
            conent: "变化量ΔR0(Ω)",
            number: "1",
            number1: "2",
            number2: "3",
          },
          {
            conent: "偏转格数Δn",
          },
          {
            conent: "电桥灵敏度S",
          },
        ],
        //最大列
        maxCols: 7,
        //最大行
        maxRows: 4,
        autoColumnSize: true, // 自适应列大小
        // customBorders:[],//添加边框
        // 合并的列
        mergeCells: [
          { row: 0, col: 4, rowspan: 4, colspan: 1 },
          { row: 0, col: 5, rowspan: 4, colspan: 2 },
        ],
        // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        // rowHeaders: ['比例臂','电阻臂R0(Ω)','待测电阻值RX(Ω)'],
        height: "auto",
        // 设置表里的文字水平 + 垂直居中
        className: "htCenter htMiddle",
        rowHeaders: false,
        // 设置固定单元格不可修改
        cells(row, colum) {
          const cellProperties = {};
          if (row === 0 && colum === 0) {
            // cellProperties.editor = false;
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 3) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 6) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 3 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          return cellProperties;
        },
        // 设置列
        columns: [
          // 第一列
          {
            data: "conent",
            editor: false,
            type: "text",
            width: 150,
          },
          // 第二列
          {
            data: "number",
            width: 120,
            // type: "numeric",
          },
          // 第三列
          {
            data: "number1",
            width: 120,
            // type: "numeric",
          },
          // 第四列
          {
            data: "number2",
            width: 120,
            // type: "numeric",
          },
          // 第五列
          {
            data: "rx",
            width: 100,
          },
          // 第六列
          {
            data: "",
            width: 100,
            // type: "numeric",
          },
          // 第七列
          {
            data: "danWei",
            width: 10,
          },
        ],
        // colHeaders: false,
        // 设置表头 + 表头合并
        nestedHeaders: [
          //第一行
          [
            {
              label: "2.测量并计算箱式直流电桥的灵敏度",
              colspan: 7,
            },
          ],
          // 第二行
          [
            {
              label: "测量内容↓ " + " " + " 测量次数→",
            },
            {
              label: "1",
            },
            {
              label: "2",
            },
            {
              label: "3",
            },
            {
              label: "测量结果",
              colspan: 3,
            },
          ],
        ],
        //自动换行
        autoWrapRow: true,
        // 设置非商业用途属性
        licenseKey: "non-commercial-and-evaluation",
        // 更新设置，暂存显示
        afterUpdateSettings() {
          const xiangshirb1 = window.localStorage.getItem("xiangshirb1");
          if (xiangshirb1 !== "null") {
            this.setDataAtCell(0, 1, xiangshirb1);
          }
          const xiangshirb2 = window.localStorage.getItem("xiangshirb2");
          if (xiangshirb2 !== "null") {
            this.setDataAtCell(0, 2, xiangshirb2);
          }
          const xiangshirb3 = window.localStorage.getItem("xiangshirb3");
          if (xiangshirb3 !== "null") {
            this.setDataAtCell(0, 3, xiangshirb3);
          }
          const xiangshirchange1a = window.localStorage.getItem("xiangshirchange1a");
          if (xiangshirchange1a !== "null") {
            this.setDataAtCell(2, 1, xiangshirchange1a);
          }
          const xiangshirchange2a =
            window.localStorage.getItem("xiangshirchange2a");
          if (xiangshirchange2a !== "null") {
            this.setDataAtCell(2, 2, xiangshirchange2a);
          }
          const xiangshirchange3a =
            window.localStorage.getItem("xiangshirchange3a");
          if (xiangshirchange3a !== "null") {
            this.setDataAtCell(2, 3, xiangshirchange3a);
          }
          const xiangshis1 = window.localStorage.getItem("xiangshis1");
          if (xiangshis1 !== "null") {
            this.setDataAtCell(3, 1, xiangshis1);
          }
          const xiangshis2 = window.localStorage.getItem("xiangshis2");
          if (xiangshis2 !== "null") {
            this.setDataAtCell(3, 2, xiangshis2);
          }
          const xiangshis3 = window.localStorage.getItem("xiangshis3");
          if (xiangshis3 !== "null") {
            this.setDataAtCell(3, 3, xiangshis3);
          }
          const xiangshis = window.localStorage.getItem("xiangshis");
          if (xiangshis !== "null") {
            this.setDataAtCell(0, 5, xiangshis);
          }
        },
        //数据改变时触发此方法
        afterChange: function (changes, source) {
          // console.log(changes);//null
          // console.log(source);
          // console.log(this.getData()); //获取全部的值
          // 挨个获取需要传给后端的值
          // console.log(this.getData()[1][1]);
          const rb1 = this.getData()[0][1];
          sessionStorage.setItem("rb1", rb1);
          // console.log(this.getData()[1][2]);
          const rb2 = this.getData()[0][2];
          sessionStorage.setItem("rb2", rb2);
          // console.log(this.getData()[1][3]);
          const rb3 = this.getData()[0][3];
          sessionStorage.setItem("rb3", rb3);
          // console.log(this.getData()[2][1]);
          const rchange1a = this.getData()[2][1];
          sessionStorage.setItem("rchange1a", rchange1a);
          // console.log(this.getData()[2][2]);
          const rchange2a = this.getData()[2][2];
          sessionStorage.setItem("rchange2a", rchange2a);
          // console.log(this.getData()[2][3]);
          const rchange3a = this.getData()[2][3];
          sessionStorage.setItem("rchange3a", rchange3a);
          const s1 = this.getData()[3][1];
          sessionStorage.setItem("s1", s1);
          // console.log(this.getData()[2][2]);
          const s2 = this.getData()[3][2];
          sessionStorage.setItem("s2", s2);
          // console.log(this.getData()[2][3]);
          const s3 = this.getData()[3][3];
          sessionStorage.setItem("s3", s3);
          // console.log(this.getData()[0][5]);
          const s = this.getData()[0][5];
          sessionStorage.setItem("s", s);
        },
      },
      // 第三个表-3.箱式直流电桥测量电阻值的配置
      xiangShiSettingsThree: {
        rowHeights: 30,
        // 数据部分
        data: [
          // 定义行，一共有3行
          {
            conent: "比例臂",
            number: "1",
            number1: "100",
            number2: "0.1",
          },
          {
            conent: "电阻臂R0(Ω)",
          },
          {
            conent: "待测电阻值RX(Ω)",
          },
        ],
        //最大列
        maxCols: 4,
        //最大行
        maxRows: 3,
        autoColumnSize: true, // 自适应列大小
        // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        // rowHeaders: ['比例臂','电阻臂R0(Ω)','待测电阻值RX(Ω)'],
        height: "auto",
        // 设置表里的文字水平 + 垂直居中
        className: "htCenter htMiddle",
        rowHeaders: false,
        // 设置固定单元格不可修改
        cells(row, colum) {
          const cellProperties = {};
          if (row === 0 && colum === 0) {
            // cellProperties.editor = false;
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 1) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 2) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 3) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 4) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 0 && colum === 6) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 1 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          if (row === 2 && colum === 0) {
            cellProperties.readOnly = true;
          } else {
            cellProperties.editor = "text";
          }
          return cellProperties;
        },
        // 设置列
        columns: [
          // 第一列
          {
            data: "conent",
            editor: false,
            type: "text",
            width: 190,
          },
          // 第二列
          {
            data: "number",
            width: 190,
            // type: "numeric",
          },
          // 第三列
          {
            data: "number1",
            width: 190,
            // type: "numeric"
          },
          // 第四列
          {
            data: "number2",
            width: 150,
            // type: "numeric"
          },
        ],
        // colHeaders: false,
        // 设置表头 + 表头合并
        nestedHeaders: [
          //第一行
          [
            {
              label: "3.箱式直流电桥测量电阻值",
              colspan: 4,
            },
          ],
          // 第二行
          [
            {
              label: "测量内容↓ " + " " + " 测量次数→",
            },
            {
              label: "R2",
            },
            {
              label: "R3",
            },
            {
              label: "R1",
            },
          ],
        ],
        //自动换行
        autoWrapRow: true,
        // 设置非商业用途属性
        licenseKey: "non-commercial-and-evaluation",
        // 更新设置，暂存显示
        afterUpdateSettings() {
          const xiangshirc1 = window.localStorage.getItem("xiangshirc1");
          if (xiangshirc1 !== "null") {
            this.setDataAtCell(1, 1, xiangshirc1);
          }
          const xiangshirc2 = window.localStorage.getItem("xiangshirc2");
          if (xiangshirc2 !== "null") {
            this.setDataAtCell(1, 2, xiangshirc2);
          }
          const xiangshirc3 = window.localStorage.getItem("xiangshirc3");
          if (xiangshirc3 !== "null") {
            this.setDataAtCell(1, 3, xiangshirc3);
          }
          const xiangshirwait1 = window.localStorage.getItem("xiangshirwait1");
          if (xiangshirwait1 !== "null") {
            this.setDataAtCell(2, 1, xiangshirwait1);
          }
          const xiangshirwait2 =
            window.localStorage.getItem("xiangshirwait2");
          if (xiangshirwait2 !== "null") {
            this.setDataAtCell(2, 2, xiangshirwait2);
          }
          const xiangshirwait3 =
            window.localStorage.getItem("xiangshirwait3");
          if (xiangshirwait3 !== "null") {
            this.setDataAtCell(2, 3, xiangshirwait3);
          }
        },
        //数据改变时触发此方法
        afterChange: function (changes, source) {
          // console.log(changes);//null
          // console.log(source);
          // console.log(this.getData());//获取全部的值
          // 挨个获取需要传给后端的值
          // console.log(this.getData()[1][1]);
          const rc1 = this.getData()[1][1];
          sessionStorage.setItem("rc1", rc1);
          // console.log(this.getData()[1][2]);
          const rc2 = this.getData()[1][2];
          sessionStorage.setItem("rc2", rc2);
          // console.log(this.getData()[1][3]);
          const rc3 = this.getData()[1][3];
          sessionStorage.setItem("rc3", rc3);
          // console.log(this.getData()[2][1]);
          const rwait1 = this.getData()[2][1];
          sessionStorage.setItem("rwait1", rwait1);
          // console.log(this.getData()[2][2]);
          const rwait2 = this.getData()[2][2];
          sessionStorage.setItem("rwait2", rwait2);
          // console.log(this.getData()[2][3]);
          const rwait3 = this.getData()[2][3];
          sessionStorage.setItem("rwait3", rwait3);
        },
      },
      contentOne: "",
      contentTwo: "",
      // contentThree: '',
      // contentFour: '',
      // 表格
      xiangShiForm: {
        ra1: "",
        ra2: "",
        ra3: "",
        rx: "",
        rx1: "",
        rx2: "",
        rx3: "",
        rb1: "",
        rb2: "",
        rb3: "",
        rchange1a: "",
        rchange2a: "",
        rchange3a: "",
        s1: "",
        s2: "",
        s3: "",
        s: "",
        rc1: "",
        rc2: "",
        rc3: "",
        rwait1: "",
        rwait2: "",
        rwait3: "",
      },
      // 选择题 + 判断题
      formTable: {
        xz1: "",
        xz2: "",
        pd1: "",
        pd2: "",
      },
      // 验证规则
      rulesTable: {
        xz1: [{ required: true, message: "请选择选项", trigger: "change" }],
        xz2: [{ required: true, message: "请选择选项", trigger: "change" }],
        pd1: [{ required: true, message: "请选择选项", trigger: "change" }],
        pd2: [{ required: true, message: "请选择选项", trigger: "change" }],
      },
      // 暂存
      DialogVisible: false,
    };
  },
  created() {
    // 暂存
    this.storageCheck();
    localStorage.setItem("state6", 1);
  },
  // 暂存
  //1 首先进入页面的时候需要监听浏览器的后退按钮，之后在操作的时候执行函数,在mounted中挂载去监听这个事件，并在methods里面添加函数，用来判断执行的条件
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      const state6 = localStorage.getItem("state6");
      // console.log(state6);
      window.addEventListener("popstate", this.back, false);
    }
  },
  // 暂存
  // 2：需要在退出页面的时候销毁这个监听事件
  destroyed() {
    window.removeEventListener("popstate", this.back, false);
  },
  methods: {
    // 暂存
    back() {
      // console.log(123);
      const state6 = localStorage.getItem("state6");
      // console.log(state6);
      if (state6 == 1) {
        // console.log(1111);
        this.$confirm(
          "检测到未保存的内容，是否在离开页面前保存？",
          "确认信息",
          {
            confirmButtonText: "暂存",
            cancelButtonText: "放弃修改",
            type: "warning",
            center: true,
          }
        )
          .then(() => {
            // this.$router.go(-1)
            // this.DialogVisible = true
            const state6 = localStorage.getItem("state6");
            // console.log(state6)
            // this.$message({
            //   type: "success",
            //   message: "暂存成功！",
            // });
            this.BackStorage();
            if (this.$route.path !== "/home") {
              this.$router.push({ path: "/home" });
            }
            // this.$router.push("/home");
            return false;
          })
          .catch(() => {
            // const state6 = sessionStorage.getItem('state6')
            // console.log(state6)
            this.$message({
              type: "info",
              message: "已取消暂存！",
            });
            if (this.$route.path !== "/home") {
              this.$router.push({ path: "/home" });
            }
            // this.giveUp()
            return false;
          });
      } else {
        // console.log(2222);
        this.$router.push({ path: "/home" });
      }
    },
    // 暂存
    // 放弃保存
    giveUp() {
      // console.log(345);
      window.localStorage.clear();
      if (this.$route.path !== "/home") {
        this.$router.push({ path: "/home" });
      }
    },
    async submitForm() {
      // 验证为null
      for (var key in this.xiangShiForm) {
        // console.log(this.xiangShiForm[key]);
        if (this.xiangShiForm[key] == "null") {
          this.$message.error("题目未做完！");
          return false;
        }
      }
      // 验证为空
      for (var key in this.xiangShiForm) {
        if (!this.xiangShiForm[key]) {
          this.$message.error("题目未做完！");
          return false;
        }
      }
      // 验证为null
      for (var key in this.formTable) {
        // console.log(this.formTable[key]);
        if (this.formTable[key] == "null") {
          this.$message.error("题目未做完！");
          return false;
        }
      }
      // 验证为空
      for (var key in this.formTable) {
        if (!this.formTable[key]) {
          this.$message.error("题目未做完！");
          return false;
        }
      }
      this.$refs["formTable"].validate((valid) => {
        if (valid) {
          // alert("submit!");
        } else {
          // console.log("error submit!!");
          // return false;
          this.$message.error("题目未做完！");
          return false;
        }
      });
      const ra1 = sessionStorage.getItem("ra1");
      // console.log(ra1)
      this.xiangShiForm.ra1 = ra1;
      const ra2 = sessionStorage.getItem("ra2");
      this.xiangShiForm.ra2 = ra2;
      const ra3 = sessionStorage.getItem("ra3");
      this.xiangShiForm.ra3 = ra3;
      const rx1 = sessionStorage.getItem("rx1");
      this.xiangShiForm.rx1 = rx1;
      const rx2 = sessionStorage.getItem("rx2");
      this.xiangShiForm.rx2 = rx2;
      const rx3 = sessionStorage.getItem("rx3");
      this.xiangShiForm.rx3 = rx3;
      const rx = sessionStorage.getItem("rx");
      this.xiangShiForm.rx = rx;
      const rb1 = sessionStorage.getItem("ra1");
      // console.log(ra1)
      this.xiangShiForm.rb1 = rb1;
      const rb2 = sessionStorage.getItem("rb2");
      this.xiangShiForm.rb2 = rb2;
      const rb3 = sessionStorage.getItem("rb3");
      this.xiangShiForm.rb3 = rb3;
      const rchange1a = sessionStorage.getItem("rchange1a");
      this.xiangShiForm.rchange1a = rchange1a;
      const rchange2a = sessionStorage.getItem("rchange2a");
      this.xiangShiForm.rchange2a = rchange2a;
      const rchange3a = sessionStorage.getItem("rchange3a");
      this.xiangShiForm.rchange3a = rchange3a;
      const s1 = sessionStorage.getItem("s1");
      this.xiangShiForm.s1 = s1;
      const s2 = sessionStorage.getItem("s2");
      this.xiangShiForm.s2 = s2;
      const s3 = sessionStorage.getItem("s3");
      this.xiangShiForm.s3 = s3;
      const s = sessionStorage.getItem("s");
      this.xiangShiForm.s = s;
      const rc1 = sessionStorage.getItem("rc1");
      // console.log(rc1)
      this.xiangShiForm.rc1 = rc1;
      const rc2 = sessionStorage.getItem("rc2");
      this.xiangShiForm.rc2 = rc2;
      const rc3 = sessionStorage.getItem("rc3");
      this.xiangShiForm.rc3 = rc3;
      const rwait1 = sessionStorage.getItem("rwait1");
      this.xiangShiForm.rwait1 = rwait1;
      const rwait2 = sessionStorage.getItem("rwait2");
      this.xiangShiForm.rwait2 = rwait2;
      const rwait3 = sessionStorage.getItem("rwait3");
      this.xiangShiForm.rwait3 = rwait3;
      // 验证为null
      if (this.xiangShiForm.ra1 == "null" &&
          this.xiangShiForm.ra2 == "null"
      ) {
        this.$message.error("题目未做完！");
        return false;
      }
      if (this.xiangShiForm.ra1 == " " &&
          this.xiangShiForm.ra2 == " "
      ) {
        // console.log(123);
        this.$message.error("题目未做完！");
        return false;
      }
      const student_id = localStorage.getItem("student_id");
      const { data: res } = await this.$http.post("/api/xiangshi/luru", {
        student_id: student_id,
        ra1: this.xiangShiForm.ra1,
        ra2: this.xiangShiForm.ra2,
        ra3: this.xiangShiForm.ra3,
        rx: this.xiangShiForm.rx,
        rx1: this.xiangShiForm.rx1,
        rx2: this.xiangShiForm.rx2,
        rx3: this.xiangShiForm.rx3,
        rb1: this.xiangShiForm.rb1,
        rb2: this.xiangShiForm.rb2,
        rb3: this.xiangShiForm.rb3,
        rchange1a: this.xiangShiForm.rchange1a,
        rchange2a: this.xiangShiForm.rchange2a,
        rchange3a: this.xiangShiForm.rchange3a,
        s1: this.xiangShiForm.s1,
        s2: this.xiangShiForm.s2,
        s3: this.xiangShiForm.s3,
        s: this.xiangShiForm.s,
        rc1: this.xiangShiForm.rc1,
        rc2: this.xiangShiForm.rc2,
        rc3: this.xiangShiForm.rc3,
        rwait1: this.xiangShiForm.rwait1,
        rwait2: this.xiangShiForm.rwait2,
        rwait3: this.xiangShiForm.rwait3,
        xz1: this.formTable.xz1,
        xz2: this.formTable.xz2,
        pd1: this.formTable.pd1,
        pd2: this.formTable.pd2,
      });
      // console.log(res)
      if (res.data.res1 == false) {
        this.$message.error("请勿重复提交！");
        this.$router.push("/home");
      } else {
        if (res.code == 100) {
          this.$message.error("提交失败！");
        }
        if (res.code == 150) {
          this.$message.error("请勿重复提交！");
        }
        if (res.code == 422) {
          this.$message.error("请填完所有题目");
        }
        if (res.code == 200) {
          // 暂存
          window.localStorage.clear();
          this.$message.success("提交成功！");
          // localStorage.setItem("state6", 2);
          this.$router.push("/home");
        }
      }
    },
    getRadioValOne() {
      // console.log(this.formTable.xz1);
      this.contentOne = this.formTable.xz1;
    },
    getRadioValTwo() {
      // console.log(this.formTable.xz2);
      this.contentTwo = this.formTable.xz2;
    },
    getRadioValThree() {
      // console.log(this.formTable.pd1);
      this.contentThree = this.formTable.pd1;
    },
    getRadioValFour() {
      // console.log(this.formTable.pd2);
      this.contentFour = this.formTable.pd2;
    },
    // 暂存弹窗出现
    storage() {
      this.DialogVisible = true;
    },
    // 暂存弹窗里面的确定按钮
    storageOk() {
      const ra1 = sessionStorage.getItem("ra1");
      // console.log(ra1)
      this.xiangShiForm.ra1 = ra1;
      const ra2 = sessionStorage.getItem("ra2");
      this.xiangShiForm.ra2 = ra2;
      const ra3 = sessionStorage.getItem("ra3");
      this.xiangShiForm.ra3 = ra3;
      const rx1 = sessionStorage.getItem("rx1");
      this.xiangShiForm.rx1 = rx1;
      const rx2 = sessionStorage.getItem("rx2");
      this.xiangShiForm.rx2 = rx2;
      const rx3 = sessionStorage.getItem("rx3");
      this.xiangShiForm.rx3 = rx3;
      const rx = sessionStorage.getItem("rx");
      this.xiangShiForm.rx = rx;
      const rb1 = sessionStorage.getItem("ra1");
      // console.log(ra1)
      this.xiangShiForm.rb1 = rb1;
      const rb2 = sessionStorage.getItem("rb2");
      this.xiangShiForm.rb2 = rb2;
      const rb3 = sessionStorage.getItem("rb3");
      this.xiangShiForm.rb3 = rb3;
      const rchange1a = sessionStorage.getItem("rchange1a");
      this.xiangShiForm.rchange1a = rchange1a;
      const rchange2a = sessionStorage.getItem("rchange2a");
      this.xiangShiForm.rchange2a = rchange2a;
      const rchange3a = sessionStorage.getItem("rchange3a");
      this.xiangShiForm.rchange3a = rchange3a;
      const s1 = sessionStorage.getItem("s1");
      this.xiangShiForm.s1 = s1;
      const s2 = sessionStorage.getItem("s2");
      this.xiangShiForm.s2 = s2;
      const s3 = sessionStorage.getItem("s3");
      this.xiangShiForm.s3 = s3;
      const s = sessionStorage.getItem("s");
      this.xiangShiForm.s = s;
      const rc1 = sessionStorage.getItem("rc1");
      // console.log(rc1)
      this.xiangShiForm.rc1 = rc1;
      const rc2 = sessionStorage.getItem("rc2");
      this.xiangShiForm.rc2 = rc2;
      const rc3 = sessionStorage.getItem("rc3");
      this.xiangShiForm.rc3 = rc3;
      const rwait1 = sessionStorage.getItem("rwait1");
      this.xiangShiForm.rwait1 = rwait1;
      const rwait2 = sessionStorage.getItem("rwait2");
      this.xiangShiForm.rwait2 = rwait2;
      const rwait3 = sessionStorage.getItem("rwait3");
      this.xiangShiForm.rwait3 = rwait3;
      // console.log(this.xiangShiForm.ra1);
      window.localStorage.setItem("xiangshira1", this.xiangShiForm.ra1);
      window.localStorage.setItem("xiangshira2", this.xiangShiForm.ra2);
      window.localStorage.setItem("xiangshira3", this.xiangShiForm.ra3);
      window.localStorage.setItem("xiangshirx", this.xiangShiForm.rx);
      window.localStorage.setItem("xiangshirx1", this.xiangShiForm.rx1);
      window.localStorage.setItem("xiangshirx2", this.xiangShiForm.rx2);
      window.localStorage.setItem("xiangshirx3", this.xiangShiForm.rx3);
      window.localStorage.setItem("xiangshirb1", this.xiangShiForm.rb1);
      window.localStorage.setItem("xiangshirb2", this.xiangShiForm.rb2);
      window.localStorage.setItem("xiangshirb3", this.xiangShiForm.rb3);
      window.localStorage.setItem(
        "xiangshirchange1a",
        this.xiangShiForm.rchange1a
      );
      window.localStorage.setItem(
        "xiangshirchange2a",
        this.xiangShiForm.rchange2a
      );
      window.localStorage.setItem(
        "xiangshirchange3a",
        this.xiangShiForm.rchange3a
      );
      window.localStorage.setItem("xiangshis1", this.xiangShiForm.s1);
      window.localStorage.setItem("xiangshis2", this.xiangShiForm.s2);
      window.localStorage.setItem("xiangshis3", this.xiangShiForm.s3);
      window.localStorage.setItem("xiangshis", this.xiangShiForm.s);
      window.localStorage.setItem("xiangshirc1", this.xiangShiForm.rc1);
      window.localStorage.setItem("xiangshirc2", this.xiangShiForm.rc2);
      window.localStorage.setItem("xiangshirc3", this.xiangShiForm.rc3);
      window.localStorage.setItem("xiangshirwait1", this.xiangShiForm.rwait1);
      window.localStorage.setItem("xiangshirwait2", this.xiangShiForm.rwait2);
      window.localStorage.setItem("xiangshirwait3", this.xiangShiForm.rwait3);
      window.localStorage.setItem("xiangshixz1", this.formTable.xz1);
      window.localStorage.setItem("xiangshixz2", this.formTable.xz2);
      window.localStorage.setItem("xiangshipd1", this.formTable.pd1);
      window.localStorage.setItem("xiangshipd2", this.formTable.pd2);
      this.$message({
        message: "暂存成功！",
        type: "success",
      });
      localStorage.setItem("state6", 2);
    },
    // 浏览器返回里面的暂存
    BackStorage() {
      const ra1 = sessionStorage.getItem("ra1");
      this.xiangShiForm.ra1 = ra1;
      const ra2 = sessionStorage.getItem("ra2");
      this.xiangShiForm.ra2 = ra2;
      const ra3 = sessionStorage.getItem("ra3");
      this.xiangShiForm.ra3 = ra3;
      const rx1 = sessionStorage.getItem("rx1");
      this.xiangShiForm.rx1 = rx1;
      const rx2 = sessionStorage.getItem("rx2");
      this.xiangShiForm.rx2 = rx2;
      const rx3 = sessionStorage.getItem("rx3");
      this.xiangShiForm.rx3 = rx3;
      const rx = sessionStorage.getItem("rx");
      this.xiangShiForm.rx = rx;
      const rb1 = sessionStorage.getItem("ra1");
      this.xiangShiForm.rb1 = rb1;
      const rb2 = sessionStorage.getItem("rb2");
      this.xiangShiForm.rb2 = rb2;
      const rb3 = sessionStorage.getItem("rb3");
      this.xiangShiForm.rb3 = rb3;
      const rchange1a = sessionStorage.getItem("rchange1a");
      this.xiangShiForm.rchange1a = rchange1a;
      const rchange2a = sessionStorage.getItem("rchange2a");
      this.xiangShiForm.rchange2a = rchange2a;
      const rchange3a = sessionStorage.getItem("rchange3a");
      this.xiangShiForm.rchange3a = rchange3a;
      const s1 = sessionStorage.getItem("s1");
      this.xiangShiForm.s1 = s1;
      const s2 = sessionStorage.getItem("s2");
      this.xiangShiForm.s2 = s2;
      const s3 = sessionStorage.getItem("s3");
      this.xiangShiForm.s3 = s3;
      const s = sessionStorage.getItem("s");
      this.xiangShiForm.s = s;
      const rc1 = sessionStorage.getItem("rc1");
      // console.log(rc1)
      this.xiangShiForm.rc1 = rc1;
      const rc2 = sessionStorage.getItem("rc2");
      this.xiangShiForm.rc2 = rc2;
      const rc3 = sessionStorage.getItem("rc3");
      this.xiangShiForm.rc3 = rc3;
      const rwait1 = sessionStorage.getItem("rwait1");
      this.xiangShiForm.rwait1 = rwait1;
      const rwait2 = sessionStorage.getItem("rwait2");
      this.xiangShiForm.rwait2 = rwait2;
      const rwait3 = sessionStorage.getItem("rwait3");
      this.xiangShiForm.rwait3 = rwait3;
      // console.log(this.xiangShiForm.ra1);
      window.localStorage.setItem("xiangshira1", this.xiangShiForm.ra1);
      window.localStorage.setItem("xiangshira2", this.xiangShiForm.ra2);
      window.localStorage.setItem("xiangshira3", this.xiangShiForm.ra3);
      window.localStorage.setItem("xiangshirx", this.xiangShiForm.rx);
      window.localStorage.setItem("xiangshirx1", this.xiangShiForm.rx1);
      window.localStorage.setItem("xiangshirx2", this.xiangShiForm.rx2);
      window.localStorage.setItem("xiangshirx3", this.xiangShiForm.rx3);
      window.localStorage.setItem("xiangshirb1", this.xiangShiForm.rb1);
      window.localStorage.setItem("xiangshirb2", this.xiangShiForm.rb2);
      window.localStorage.setItem("xiangshirb3", this.xiangShiForm.rb3);
      window.localStorage.setItem(
        "xiangshirchange1a",
        this.xiangShiForm.rchange1a
      );
      window.localStorage.setItem(
        "xiangshirchange2a",
        this.xiangShiForm.rchange2a
      );
      window.localStorage.setItem(
        "xiangshirchange3a",
        this.xiangShiForm.rchange3a
      );
      window.localStorage.setItem("xiangshis1", this.xiangShiForm.s1);
      window.localStorage.setItem("xiangshis2", this.xiangShiForm.s2);
      window.localStorage.setItem("xiangshis3", this.xiangShiForm.s3);
      window.localStorage.setItem("xiangshis", this.xiangShiForm.s);
      window.localStorage.setItem("xiangshirc1", this.xiangShiForm.rc1);
      window.localStorage.setItem("xiangshirc2", this.xiangShiForm.rc2);
      window.localStorage.setItem("xiangshirc3", this.xiangShiForm.rc3);
      window.localStorage.setItem("xiangshirwait1", this.xiangShiForm.rwait1);
      window.localStorage.setItem("xiangshirwait2", this.xiangShiForm.rwait2);
      window.localStorage.setItem("xiangshirwait3", this.xiangShiForm.rwait3);
      window.localStorage.setItem("xiangshixz1", this.formTable.xz1);
      window.localStorage.setItem("xiangshixz2", this.formTable.xz2);
      window.localStorage.setItem("xiangshipd1", this.formTable.pd1);
      window.localStorage.setItem("xiangshipd2", this.formTable.pd2);
      this.$message({
        message: "暂存成功！",
        type: "success",
      });
      localStorage.setItem("state6", 2);
    },
    // 获取暂存里面的数据
    storageCheck() {
      const ra1 = window.localStorage.getItem("xiangshira1");
      this.xiangShiForm.ra1 = ra1;
      const ra2 = window.localStorage.getItem("xiangshira2");
      this.xiangShiForm.ra2 = ra2;
      const ra3 = window.localStorage.getItem("xiangshira3");
      this.xiangShiForm.ra3 = ra3;
      const rx = window.localStorage.getItem("xiangshirx");
      this.xiangShiForm.rx = rx;
      const rx1 = window.localStorage.getItem("xiangshirx1");
      this.xiangShiForm.rx1 = rx1;
      const rx2 = window.localStorage.getItem("xiangshirx2");
      this.xiangShiForm.rx2 = rx2;
      const rx3 = window.localStorage.getItem("xiangshirx3");
      this.xiangShiForm.rx3 = rx3;
      const rb1 = window.localStorage.getItem("xiangshirb1");
      this.xiangShiForm.rb1 = rb1;
      const rb2 = window.localStorage.getItem("xiangshirb2");
      this.xiangShiForm.rb2 = rb2;
      const rb3 = window.localStorage.getItem("xiangshirb3");
      this.xiangShiForm.rb3 = rb3;
      const rchange1a = window.localStorage.getItem("xiangshirchange1a");
      this.xiangShiForm.rchange1a = rchange1a;
      const rchange2a = window.localStorage.getItem("xiangshirchange2a");
      this.xiangShiForm.rchange2a = rchange2a;
      const rchange3a = window.localStorage.getItem("xiangshirchange3a");
      this.xiangShiForm.rchange3a = rchange3a;
      const s1 = window.localStorage.getItem("xiangshis1");
      this.xiangShiForm.s1 = s1;
      const s2 = window.localStorage.getItem("xiangshis2");
      this.xiangShiForm.s2 = s2;
      const s3 = window.localStorage.getItem("xiangshis3");
      this.xiangShiForm.s3 = s3;
      const s = window.localStorage.getItem("xiangshis");
      this.xiangShiForm.s = s;
      const rc1 = window.localStorage.getItem("xiangshirc1");
      this.xiangShiForm.rc1 = rc1;
      const rc2 = window.localStorage.getItem("xiangshirc2");
      this.xiangShiForm.rc2 = rc2;
      const rc3 = window.localStorage.getItem("xiangshirc3");
      this.xiangShiForm.rc3 = rc3;
      const rwait1 = window.localStorage.getItem("xiangshirwait1");
      this.xiangShiForm.rwait1 = rwait1;
      const rwait2 = window.localStorage.getItem("xiangshirwait2");
      this.xiangShiForm.rwait2 = rwait2;
      const rwait3 = window.localStorage.getItem("xiangshirwait3");
      this.xiangShiForm.rwait3 = rwait3;
      const xz1 = window.localStorage.getItem("xiangshixz1");
      this.formTable.xz1 = xz1;
      const xz2 = window.localStorage.getItem("xiangshixz2");
      this.formTable.xz2 = xz2;
      const pd1 = window.localStorage.getItem("xiangshipd1");
      this.formTable.pd1 = pd1;
      const pd2 = window.localStorage.getItem("xiangshipd2");
      this.formTable.pd2 = pd2;
      // for (var key in this.xiangShiForm) {
      //   // console.log(this.xiangShiForm[key]);
      //   if (this.xiangShiForm[key] == "null") {
      //     this.xiangShiForm[key] = "";
      //     // return false;
      //   }
      // }
      // for (var key in this.formTable) {
      //   // console.log(this.formTable[key]);
      //   if (this.formTable[key] == "null") {
      //     this.formTable[key] = "";
      //     // return false;
      //   }
      // }
    }
  }
}
</script>

<style scoped>
.allStyle {
  height: 100%;
  width: 50%;
  min-width: 320px;
  margin: 0 auto;
}

.el-radio {
  display: block;
  /* height: 20px; */
  width: 50%;
  /* line-height: 20px; */
  /* padding: 5px; */
  margin-top: 5px;
  margin-bottom: 5px;
}

.el-radio-group {
  margin-top: 5px;
  margin-bottom: 5px;
}

.el-form-item__content .submitButton {
  width: 20%;
  display: block;
  margin: 0 auto;
}
.btn {
  /* width: 20%;
  margin-left: 40%;
  margin-bottom: 2vw; */
  left: 0%;
  margin-bottom: 5%;
  bottom: 0%;
  width: 20%;
  transform: translate(120%, 30%);
}
table {
  border-collapse: collapse;
  border: 1px #525152 solid;
  width: 90%;
  margin: 0 auto;
  font-size: 17px;
  text-align: center;
}

th,
td {
  /* border-collapse: collapse; */
  border: 0.5px #525152 solid;
  text-align: center;
  /* font-size: 17px; */
  line-height: 30px;
}

/*模拟对角线*/
.out {
  border-top: 55px #d6d3d6 solid;
  /*上边框宽度等于表格第一行行高*/
  width: 0px;
  /*让容器宽度为0*/
  height: 0px;
  /*让容器高度为0*/
  border-left: 200px #efefef solid;
  /*左边框宽度等于表格第一行第一格宽度*/
  position: relative;
  /*让里面的两个子容器绝对定位*/
}

/* 测量次数 */
b {
  font-style: normal;
  display: block;
  position: absolute;
  top: -50px;
  left: -90px;
  width: 100px;
}

/* 测量内容 */
em {
  font-style: normal;
  display: block;
  position: absolute;
  top: -30px;
  left: -200px;
  width: 100px;
}
input {
  background-color: #fff;
  border: none;
  text-align: center;
  width: 90%;
  font-size: 17px;
  /* color: #539aea; */
}
input:focus {
  outline: none;
  /* background-color: #ECF5FF; */
}
</style>
s
